import BasicHelp from "./BasicHelp";
import { useMemo } from "react";
import { childrenToMap } from "@/utils/helper/tsxHelper";
import "../style/BasicTitle.less";

interface BasicTitlePropsType {
	// Help text list or string
	helpMessage?: string | string[];
	// Whether the color block on the left side of the title
	span?: boolean;
	//Whether to default the text, that is, not bold
	normal?: boolean;
}
const BasicTitlePropsDefault = {
	helpMessage: ""
};

export default function BasicTitle(props: BasicTitlePropsType & ComponentNode) {
	props = Object.assign({}, { ...BasicTitlePropsDefault, ...props });

	const prefixCls = "basic-title";
	const slots = childrenToMap(props.children);
	const getClass = useMemo(() => {
		let classList = [prefixCls];
		if (props.span && slots.default) classList.push(`${prefixCls}-show-span`);
		if (props.normal) classList.push(`${prefixCls}-normal`);
		if (props.className) classList.push(props.className);
		return classList.join(" ");
	}, [props.span, props.normal, props.className]);

	return (
		<span className={getClass}>
			{slots?.default}
			{props.helpMessage && <BasicHelp className={`${prefixCls}-help`} text={props.helpMessage} />}
		</span>
	);
}
